<template>
	<n-space vertical>
		<n-space>
			<n-select v-model:value="dbType" :options="dbTypeArr" class="w-120px"/>
			<n-button type="success" @click="handleGenSql2Json">生成</n-button>
		</n-space>
		<n-space>
			<codemirror v-model:modelValue="sqlVal" placeholder="请输入SQL..." :style="{width:'600px',height:'600px'}"
				:autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />
			<n-card style="width: 600px;height: 100%;overflow: auto;">
				<n-form label-placement="left"  :label-width="80" >
						<n-form-item label="表名" path="sqlJson.name">
						<n-input v-model:value="sqlJson.name" placeholder="输入表名" />
					</n-form-item>
					<n-form-item label="表注释" path="sqlJson.comment">
						<n-input v-model:value="sqlJson.comment" placeholder="输入表注释" />
					</n-form-item>
					<n-data-table :columns="columnFromTable" :data="sqlJson.columns" />
				</n-form>
			</n-card>
		</n-space>
		<n-space justify="center" class="mt-4">
			<n-button type="primary" @click="handleSubmitForm">确定</n-button>
			<n-button @click="hendleCloseModal">取消</n-button>
		</n-space>
	</n-space>
</template>

<script  setup lang='tsx' >
import { ref } from 'vue';
import { handleProcessSql } from './sqlGen';
import { featchAddGenTableByInitDto } from "@/service/api/genCode/index"
import { BusinessStatus } from "~/src/enum"
import { DataTableColumns } from 'naive-ui';
import {format} from 'sql-formatter'
import { Codemirror } from 'vue-codemirror'
import { sql } from '@codemirror/lang-sql'
import { oneDark } from '@codemirror/theme-one-dark'
import { GenTableInitDto,GenTableColumnInitDto,dbTypeArr, } from './sqlGen.domain';

const emit = defineEmits(["list", "close"])
const sqlVal = ref<string>("")
const dbType = ref<string>("MYSQL")
const sqlJson = ref<GenTableInitDto>({})
const extensions = [sql(), oneDark]
const columnFromTable:DataTableColumns<GenTableColumnInitDto> = [
	{
		title:"列名",key:"name",
		render(rowData, rowIndex) {
				return <>
					<n-input value={rowData.name} placeholder="输入列名" onUpdateValue={(v:string)=>{rowData.name = v}} />
				</>
		},
	},
	{
		title:"列类型",key:"type",
		render(rowData, rowIndex) {
				return <>
					<n-input value={rowData.type} placeholder="输入列类型" onUpdateValue={(v:string)=>{rowData.type = v}} />
				</>
		},
	},
	{
		title:"主键",key:"isPk",
		render(rowData, rowIndex) {
				return <>
					<n-switch value={rowData.isPk} checkedValue={BusinessStatus.Yse} uncheckedValue={BusinessStatus.No}  onUpdateValue={(v:BusinessStatus)=>{rowData.isPk = v}} />
				</>
		},
	},
	{
		title:"必填",key:"isRequired",
		render(rowData, rowIndex) {
				return <>
					<n-switch value={rowData.isRequired} checkedValue={BusinessStatus.Yse} uncheckedValue={BusinessStatus.No}  onUpdateValue={(v:BusinessStatus)=>{rowData.isRequired = v}} />
				</>
		},
	},
	{
		title:"列注释",key:"comment",
		render(rowData, rowIndex) {
				return <>
					<n-input value={rowData.comment} placeholder="输入列注释" onUpdateValue={(v:string)=>{rowData.comment = v}} />
				</>
		},
	},
]

function handleGenSql2Json(){
	sqlVal.value = format(sqlVal.value)
	sqlJson.value = handleProcessSql(sqlVal.value,dbType.value )
}
async function  handleSubmitForm(){
	if(!handleVaildSqlJson())return;

	const {data,error} =await featchAddGenTableByInitDto(sqlJson.value)
	console.info(data)
	if(!error){
		emit("list")
		hendleCloseModal()
	}

}
function hendleCloseModal(){
	emit("close")
}
function handleVaildSqlJson(){
	 const obj = sqlJson.value
	if(!obj.name){
		window.$message?.error("表名不能为空！")
		return false;
	}
	if(!obj.columns){
		window.$message?.error("列不能为空！")
		return false;
	}
	const err = obj.columns.filter(it=>{
		return !(it.name && it.type);
	})
	if(err.length > 0){
		window.$message?.error("列数值校验失败！请检查后重试")
		return false;
	}
	return true
}
</script>

<style lang='scss' scoped>

</style>
